<template>
	<view class="box">
		<view>
			<drawer :show="isDrawerOpen" @close="closeDrawer"></drawer>
		</view>
		<view>
			<languageMask :show="isOpenMask" @close="closeMask" @languageChanged="refreshLanguage"></languageMask>
		</view>
		<view class="head">
			<view style="display: flex;align-items: center;">
				<image src="../../static/qukuailian2_slices/danlieliebiao.png" class="list" @click="openDrawer"></image>
				<image src="../../static/caifubeifen_slices/lujing9.png" mode="" class="back" @click="goBack"></image>
			</view>
			<view class="head-title">
				<view class="vtitle">{{$data.$language.VIPvtitle}}</view>
			</view>
			<view class="right-head">
				<image src="../../static/qianbaobeifen2_slices/diqiugenghuan.png" mode="" class="language" @click="openMask"></image>
			</view>
		</view>
		<!-- <view>
			<image src="../../static/节点会员beifen_slices/13281658365932_.picbeifen 2.png" mode="" class="headImg"></image>
			<view class="name">
				<view class="nicName">
					7i
				</view>
				<image src="../../static/节点会员beifen_slices/Vip3.png" mode="" class="sign"></image>
			</view>
		</view> -->
		<!-- 小节点权益 -->
		<view class="smallRights" v-if="TaolarData!=null">
			<view class="test1" v-if="langImg">
				{{name}}{{$data.$language.Vtest1}}
			</view>
			<view class="test1" v-else>
				{{name_en}}{{$data.$language.Vtest1}}
			</view>
			<view class="stars1">
				<image src="../../static/jiedianbeifen_slices/xingxing.png" mode="" class="star"></image>
				<view class="test2">{{$data.$language.Vtest2}}{{Math.round(bonus)}}%</view>
			</view>
			<view class="stars1">
				<image src="../../static/jiedianbeifen_slices/xingxing.png" mode="" class="star"></image>
				<!-- <view class="test2">{{$data.$language.Vtest3}}{{group_name}}{{$data.$language.Vtest5}}</view> -->
				<view class="test2">{{$data.$language.btest3}}</view>
			</view>
			<view class="stars1">
				<image src="../../static/jiedianbeifen_slices/xingxing.png" mode="" class="star"></image>
				<!-- <view class="test2">{{$data.$language.Vtest4}}{{give_wone}}{{$data.$language.Vtest6}}</view> -->
				<view class="test2" v-if="maxindes>1">{{$data.$language.btestmox2}}</view>
				<view class="test2" v-else>{{$data.$language.btestmox1}}</view>
			</view>
			<image src="../../static/shnejijiedian.jpg" mode="" class="upgrade" @click="toBuyNodes" v-if="langImg"></image>
			<image src="../../static/bianzu_slices (1)/bianzu.png" mode="" class="upgrade" @click="toBuyNodes" v-if="!langImg"></image>
		</view>
		<view class="smallRights" v-else>
			<view class="test1" >
				{{$data.$language.Nopresent}}
			</view>
			<image src="../../static/shnejijiedian.jpg" mode="" class="upgrade" @click="toBuyNodes" v-if="langImg"></image>
			<image src="../../static/bianzu_slices (1)/bianzu.png" mode="" class="upgrade" @click="toBuyNodes" v-if="!langImg"></image>
		</view>
		<!-- 交易明细 -->
		<!-- <view class="details">
			<view class="title">
				交易明细
			</view>
			<view class="list1">
				<image src="../../static/节点会员beifen_slices/bianzu.png" mode="" class="circle"></image>
				<view class="test">
					<view class="top">
						<view class="node">
							NODE
						</view>
						<view class="over">
							已完成
						</view>
					</view>
					<view class="bottom">
						<view class="date">
							06/25 09:41
						</view>
						<view class="number">
							+2000.00
						</view>
					</view>
				</view>
			</view>
			<view class="list1">
				<image src="../../static/节点会员beifen_slices/bianzu.png" mode="" class="circle"></image>
				<view class="test">
					<view class="top">
						<view class="node">
							NODE
						</view>
						<view class="going">
							进行中
						</view>
					</view>
					<view class="bottom">
						<view class="date">
							06/25 09:41
						</view>
						<view class="number">
							+2000.00
						</view>
					</view>
				</view>
			</view>
			<view class="list1">
				<image src="../../static/节点会员beifen_slices/bianzu.png" mode="" class="circle"></image>
				<view class="test">
					<view class="top">
						<view class="node">
							NODE
						</view>
						<view class="default">
							失败
						</view>
					</view>
					<view class="bottom">
						<view class="date">
							06/25 09:41
						</view>
						<view class="number">
							+2000.00
						</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import drawer from "../../my-components/drawer/drawer.vue"
	import languageMask from "../../my-components/languageMask/languageMask.vue"
	import zhCN from '@/locales/zh-CN.js'
	import enUS from '@/locales/en-US.js'
	import trCN from '@/locales/tr-CN.js'
	import {
		getMember,
		getMYsix
	} from '@/api/index.js';
	export default {
		data() {
			return {
				// $language:uni.getStorageSync('locale')=='en-US'? enUS:zhCN,
				langImg:uni.getStorageSync('locale')=='tr-CN',
				isDrawerOpen: false,
				isOpenMask: false,
				group_name:'',
				name:'',
				name_en:'',
				give_wone:'',
				bonus:'',
				TaolarData:null,
				maxindes:0,
			}
		},
		onLoad() {
			console.log(this.langImg)
			var translate = uni.getStorageSync('locale')
			if(translate=='en-US'){
				this.$data.$language = enUS
			}else if(translate=='zh-CN'){
				this.$data.$language = zhCN
			}else{
				this.$data.$language = trCN
			}
			this.loadData()
		},
		onShow() {
			this.loadData()
			this.monboxlist()
		},
		methods: {
			monboxlist(){
				getMYsix((data) => {
				     console.log(data.data)
					 this.maxindes = data.data.node_id
				    },
				    (errorMsg) => {
				      // 处理请求失败或错误的情况
				      console.error(errorMsg);
				    }
				);
			},
			loadData() {
				getMember(
				(data) => {
						// 处理成功返回的数据
						this.TaolarData = data
						this.group_name = data.group_name
						this.name = data.name
						this.name_en = data.name_en
						this.give_wone = data.give_wone
						this.bonus = data.bonus
						// this.count_usdt = parseInt(data.count_usdt).toFixed(2)
						// this.type0 = data.type0
						// this.type1 = data.type1
						// this.type2 = data.type2
						// this.logdata = data.log.data
						// console.log(this.logdata, 'this.logdata');
			
					},
					(errorMsg) => {
						// 处理请求失败或错误的情况
						console.error(errorMsg);
					}
				);
			},
			refreshLanguage(locale) {
			      if (locale === 'zh-CN') {
			        this.$language = zhCN
			      } else if (locale === 'en-US') {
			        this.$language = enUS
			      }else{
					  this.$language = trCN
				  }
				  uni.reLaunch({
				    url: '/pages/VIP/VIP' // 当前页面的lujing
				  });
				  
			},
			goBack() {
				uni.navigateBack()
			},
			openDrawer() {
				this.isDrawerOpen = true
			},
			closeDrawer() {
				this.isDrawerOpen = false
			},
			openMask() {
				this.isOpenMask = true
			},
			closeMask() {
				this.isOpenMask = false; // 遮罩层guanbi事件处理
			},
			toBuyNodes() {
				uni.navigateTo({
					url: '/pages/buyNodes/buyNodes'
				})
			}
		},
		components: {
			drawer,
			languageMask
		}
	}
</script>

<style>
	.box {
		width: 750rpx;
		background: linear-gradient(18deg, #fff, #fff, #fff, #fff, #8BA3CD);
	}

	.head {
		padding: 40rpx;

	}

	.title {
		width: 164rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 48rpx;
		margin-left: 160rpx;
	}

	.headImg {
		height: 156rpx;
		width: 156rpx;
		margin: 80rpx 0 0 298rpx;
	}

	.smallRights {
		width: 702rpx;
		height: 288rpx;
		margin: 52rpx 0 0 24rpx;
	}

	.name {
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.name .nickName {
		width: 42rpx;
		height: 40rpx;
		font-size: 36rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #2C2C2C;
		line-height: 42rpx;
		margin: 40rpx 0 0 338rpx;
	}

	.name .sign {
		width: 30rpx;
		height: 28rpx;
		margin-left: 12rpx;
	}

	.smallRights {
		width: 702rpx;
		height: 288rpx;
		margin: 24rpx 0 0 24rpx;
		background-image: url(../../static/jiedianbeifen_slices/bianzu 3beifen 3.png);
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;
		position: relative;
	}

	.smallRights .test1 {
		width: 358rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #0762FF;
		line-height: 50rpx;
		margin: 46rpx 0 0 32rpx;
	}

	.stars1 {
		display: flex;
	}

	.star {
		width: 24rpx;
		height: 24rpx;
		margin: 18rpx 0 0 32rpx;
	}

	.stars1 .test2 {
		width: 604rpx;
		/* height: 34rpx; */
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2C2C2C;
		line-height: 34rpx;
		margin: 14rpx 0 0 8rpx;
	}

	.upgrade {
		width: 154rpx;
		height: 66rpx;
		position: absolute;
		top: 38rpx;
		left: 516rpx;
	}

	.details {
		height: 520rpx;
		width: 702rpx;
		margin: 64rpx 0 0 24rpx;
	}

	.details .title {
		width: 544rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2C2C2C;
		line-height: 44rpx;
		margin-left: 0;
	}

	.details .list1 {
		width: 702rpx;
		height: 140rpx;
		background: #F4F6FA;
		border-radius: 16rpx;
		margin-top: 16rpx;
		display: flex;
	}

	.list1 .circle {
		width: 34rpx;
		height: 38rpx;
		margin: 50rpx 0 0 32rpx;
	}

	.list1 .top {
		display: flex;
		margin: 38rpx 0 0 18rpx;
	}

	.top .node {
		width: 128rpx;
		height: 32rpx;
		font-size: 28rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #2C2C2C;
		line-height: 32rpx;
	}

	.top .over {
		width: 106rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3AC296;
		line-height: 34rpx;
		margin-left: 352rpx;
	}

	.list1 .bottom {
		display: flex;
		margin: 12rpx 0 0 18rpx;
	}

	.bottom .date {
		width: 188rpx;
		height: 28rpx;
		font-size: 24rpx;
		font-family: ArialMT;
		color: #939393;
		line-height: 28rpx;
	}

	.bottom .number {
		width: 168rpx;
		height: 34rpx;
		font-size: 32rpx;
		font-family: Arial-BoldMT, Arial;
		font-weight: normal;
		color: #2C2C2C;
		line-height: 36rpx;
		margin-left: 230rpx;
	}

	.going {
		width: 106rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFA35B;
		line-height: 34rpx;
		margin-left: 352rpx;
	}

	.default {
		width: 106rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #E34160;
		line-height: 34rpx;
		margin-left: 352rpx;
	}
</style>